<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" @click="getGoodList">
        添加本店拼单
      </el-button>
    </div>
    <!-- 拼单列表 -->
    <el-table :data="orderList" class="data_table" style="width: 100%;">
      <el-table-column prop="name" label="拼单发起者" width="100">
        <template slot-scope="{row}">
          <span>{{ row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="拼单物品名称" width="150">
        <template slot-scope="{row}">
          <span>{{ row.good.goodName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods" label="拼单物品类型" width="100">
        <template slot-scope="{row}">
          <span>{{ row.good.goodType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="拼单物品数量" width="80">
        <template slot-scope="{row}">
          <span>{{ row.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单价格（个人）" width="80">
        <template slot-scope="{row}">
          <span>{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单进度" width="80">
        <template slot-scope="{row}">
          <span>{{ row.nowGoodNumber }} / {{ row.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="截至日期" width="250">
        <template slot-scope="{row}">
          <el-date-picker ref="date" type="datetime" v-model="row.end_time" readonly />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单状态" width="80">
        <template slot-scope="{row}">
          <span>{{ row.fightOrderState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="seeMore(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 选择商品 -->
    <el-dialog title = "选择商品" :visible.sync="chooseGoodVisible" width="72%">
      <el-table :data="goodTable" class="data_table" style="width: 100%">
        <el-table-column prop="goodId" label="商品Id" width="70">
          <template slot-scope="{ row }">
            <span>{{ row.goodId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodName" label="商品名称" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.goodName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodtype" label="商品品牌" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.goodType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodspec" label="规格型号" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.spec }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="剩余库存" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="批发价格" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.wholeSalePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="零售价格" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.retailPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="有效期至" width="250">
          <template slot-scope="{ row }">
            <el-date-picker
              ref="date"
              type="datetime"
              v-model="row.validDate"
              readonly
            />
          </template>
        </el-table-column>
        <el-table-column
          label="Actions"
          align="center"
          width="200"
          class-name="seeMore"
        >
          <template slot-scope="{ row }">
            <el-button
              class="filter-item"
              type="primary"
              @click="chooseGood(row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加拼单 -->
    <el-dialog :title="textMap.add" :visible.sync="addOrder">
      <el-form ref="dataFormsee" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="拼单发起用户名称" prop="shopLocation">
          <el-input v-model="temp.userName" />
        </el-form-item>
        <el-form-item label="拼单发起用户拼单数量" prop="number">
          <el-input v-model="temp.nowNum" type="number"/>
        </el-form-item>
        <el-form-item label="拼单商品名称" prop="goodName">
          <el-input  v-model="temp.goodName" readonly />
        </el-form-item>
        <el-form-item label="拼单商品类型" prop="goodType">
          <el-input  v-model="temp.goodType" readonly/>
        </el-form-item>
        <el-form-item label="拼单商品保质期至" prop="goodType">
          <el-date-picker ref="date" type="datetime" v-model="temp.validDate" readonly/>
        </el-form-item>
        <el-form-item label="拼单商品数量" prop="goodNum">
          <el-input v-model="temp.goodNumber" type="number" :placeholder="'库存数量为：' + temp.leftNumber "/>
        </el-form-item>
        <el-form-item label="商品单价" prop="price">
          <el-input  v-model="temp.price" type="number" :placeholder="'零售价为' + temp.retailPrice + '批发价为' + temp.wholeSalePrice"/>
        </el-form-item>
        <el-form-item label="截至日期" prop="date">
          <el-date-picker ref="date" type="datetime" v-model="temp.end_time" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrder = false">
          返回
        </el-button>
        <el-button type="primary" @click=buy()>
          确定添加
        </el-button>
      </div>
    </el-dialog>

    <!-- 查看拼单详情 -->
    <el-dialog :title="textMap.detail" :visible.sync="seedetail">
      <el-form ref="dataFormsee" :model="detail" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="拼单发起用户名称" prop="shopLocation">
          <el-input v-model="detail.userName" readonly/>
        </el-form-item>
        <el-form-item label="拼单商品名称" prop="goodName">
          <el-input  v-model="detail.goodName" readonly/>
        </el-form-item>
        <el-form-item label="拼单商品类型" prop="goodType">
          <el-input  v-model="detail.goodType" readonly/>
        </el-form-item>
        <el-form-item label="拼单商品数量" prop="goodNum">
          <el-input v-model="detail.goodNumber" readonly/>
        </el-form-item>
        <el-form-item label="拼单人数" prop="price">
          <el-input  v-model="detail.nowNum" readonly/>
        </el-form-item>
        <el-form-item label="拼单进度" prop="price">
          <el-progress :percentage="detail.percent" :show-text="true" ></el-progress>
          <span v-text="detail.progress" style="align-text:right"></span>
        </el-form-item>
        <el-form-item label="平均价格" prop="price">
          <el-input  v-model="detail.price" readonly/>
        </el-form-item>
        <el-form-item label="截至日期" prop="date">
          <el-date-picker ref="date" type="datetime" v-model="detail.end_time" readonly/>
        </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="seedetail = false">
        返回
      </el-button>
    </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import request from '@/utils/request'
import { parse } from 'path-to-regexp'

  export default {
    name: 'store-pindan',
    data (){
      return {
        storeId: '',
        storeNumber: '',
        storeName: '',
        storeLocation:'',
        accessToken: null,
        dbid: null,
        addOrder: false,
        seedetail: false,
        chooseGoodVisible: false,
        orderList: [],
        goodTable: [],
        temp: {
          userName: "",
          goodName: "",
          goodType: "",
          goodId: null,
          goodNumber: null,
          leftNumber: null,
          nowNum: null,
          price: null,
          validDate: null,
          end_time: null,
          wholeSalePrice: null,
          retailPrice: null,
          spec: null,
          unit: null,

        },
        detail: {
          userId: "",
          userName: "",
          goodName: "",
          goodType: "",
          goodNumber: 0,
          nowNum: null,
          percent: 0.0,
          progress: "70/100",
          price: 0,
          end_time: new Date(),
        },
        textMap: {
          add: '添加拼单',
          detail: '查看拼单详情'
        },
      }
    },
    mounted(){

      this.init()
    },
    methods: {
      init(){
        this.storeId = JSON.parse(sessionStorage.getItem('store')).storeId
        this.storeNumber = JSON.parse(sessionStorage.getItem('store')).storeNumber
        this.storeName = JSON.parse(sessionStorage.getItem('store')).storeName
        this.storeLocation = JSON.parse(sessionStorage.getItem('store')).storeLocation
        // 初始化数据
        request.get("/fightorder/getStoreOrder/" + this.storeNumber ).then(request => {
          var Data=request.data // PFResponse
          this.orderList = Data.data
        })
      },
      getGoodList() {
      // 请求获取店面所有已上架的商品信息
      let repositoryNumber = JSON.parse(sessionStorage.getItem("store")).repositoryNumber
      this.accessToken = JSON.parse(sessionStorage.getItem("access_token"))
      this.dbid = JSON.parse(sessionStorage.getItem("dbid"))
      
      request
        .get("/api/v1/linkjdy/getstoreGood/" + this.accessToken 
              + "/" + this.dbid + "/" + this.storeId + "/" + repositoryNumber)
        .then((request) => {
          var respData = request.data
          console.log(respData.data)
          this.goodTable = respData.data
          this.goodTable.forEach(good => {
            good.validDate = new Date(good.validDate)
          })
        })
        .catch(() => {
          this.loading = false;
          this.$message.error("获取数据出错，请联系管理员！");
          return;
        });
      this.chooseGoodVisible = true;
      },
      chooseGood(row) {
        this.temp.goodId = row.goodId
        this.temp.goodName = row.goodName
        this.temp.goodType = row.goodType
        this.temp.validDate = row.validDate
        this.temp.leftNumber = row.goodNumber
        this.temp.wholeSalePrice = row.wholeSalePrice
        this.temp.retailPrice = row.retailPrice
        this.temp.spec = row.spec
        this.temp.unit = row.unit

        this.addOrder = true
      },
      seeMore(row){
        // 查看拼单详情，可以查看 拼单进度
        this.detail.userId = row.userId
        this.detail.userName = row.userName
        this.detail.goodName = row.good.goodName
        this.detail.goodType = row.good.goodType
        this.detail.goodNumber = row.goodNumber
        this.detail.nowNum = row.nowNum
        this.detail.percent = parseInt(row.nowGoodNumber/row.goodNumber*100)
        this.detail.progress = row.nowGoodNumber + "/" + row.goodNumber
        this.detail.price = row.price
        this.detail.end_time = row.end_time

        this.seedetail = true
      },
      buy() {
        if (this.temp.userName==null||this.temp.price==null||this.temp.end_time==null) {
          this.$message.warning("请填写所有的参数")
          return
        } else if (this.temp.goodNumber==null||this.temp.goodNumber<=0||this.temp.nowNum==null||this.temp.nowNum<=0) {
          this.$message.warning("拼单的商品数量不能为负数或小数")
          return
        } else if (parseInt(this.temp.goodNumber)>this.temp.leftNumber||parseInt(this.temp.nowNum)>parseInt(this.temp.goodNumber)) {
          // console.log(this.temp)
          this.$message.warning("拼单的商品数量不能超过库存数量！")
          return
        } else if (parseFloat(this.temp.price)<=0) {
          this.$message.warning("商品单价不能为负值！")
          return
        }
          //  添加拼单
        let formdata = {
          storeId: this.storeNumber,
          storeName: this.storeName,
          storeLocation: this.storeLocation,
          storeUsername: JSON.parse(sessionStorage.getItem("login_name")),
          storePassword: JSON.parse(sessionStorage.getItem("password")),
          warehouseNumber: JSON.parse(sessionStorage.getItem("store")).repositoryNumber,
          userName: this.temp.userName,
          fightOrderState: 'ORDER_DISPLAY',
          participaters: this.temp.userId,
          nowNum: 1,
          goodId: this.temp.goodId,
          goodName: this.temp.goodName,
          goodNumber: this.temp.goodNumber,
          spec: this.temp.spec,
          unit: this.temp.unit,
          validDate: this.temp.validDate,
          wholeSalePrice: this.temp.wholeSalePrice,
          retailPrice: this.temp.retailPrice,
          nowGoodNumber: this.temp.nowNum,
          goodType: this.temp.goodType,
          price: this.temp.price,
          start_time: new Date().getFullYear()+"." + (new Date().getMonth()+1)+"."+ new Date().getDate()+"."+ new Date().getHours(),
          end_time: this.temp.end_time.getFullYear()+"." +(this.temp.end_time.getMonth()+1)+"."+this.temp.end_time.getDate()+"."+this.temp.end_time.getHours()
        }

        request.post("/fightorder/addFightOrder/",formdata).then(request => {
          var Data=request.data // PFResponse
          if(Data.code==200) {
            this.$message.success(Data.message)
            this.addOrder = false
            this.chooseGoodVisible = false
            this.init()
            return
          }else{
            this.$message.error(Data.message)
            return
          }
        }).catch(()=>{
          this.$message.error('获取数据出错，请联系管理员！')
          return
        })
      }
    }
  }
</script>

<style scoped>

</style>
